<template>
  <div id="myPurchase-detail">
    <div class="filter-box">
      <div class="top-box">
          <div class="box-title">黑名单</div>
      </div>
      <a-form-model
        :model="form"
        :rules="rules"
        ref="form"
      >
      <a-row class="info">
        <a-col :span="8">
            <a-form-model-item label="项目组织" ref="orgName" class="form-col" prop="orgName">
            <a-input
              v-model="form.orgName"
              placeholder="请输入项目组织"
              style="width: 250px;"
              disabled
            />
            </a-form-model-item>
        </a-col>
        <a-col :span="8">
             <a-form-model-item label="区域" ref="areaName" class="form-col" prop="areaName">
            <a-select
              v-model="form.areaName"
              placeholder="请输入区域"
              style="width: 250px;"
              allowClear
              showSearch
            >
            <a-select-option v-for="option in area"
              :key="option.label"
              :value="option.value">
              {{option.label}}
            </a-select-option>
            </a-select>
             </a-form-model-item>
        </a-col>
        <a-col :span="8">
            <a-form-model-item label="项目" ref="projectName" class="form-col" prop="areaName">
           <a-input
              v-model="form.projectName"
              placeholder="请输入项目"
              style="width: 250px;"
              @click="showDiag"
            />
            </a-form-model-item>
        </a-col>
      </a-row>
      <a-row class="info">
          <a-col :span="8">
            <a-form-model-item label="黑名单类型" ref="blacklistType"  class="form-col" prop="blacklistType">
            <a-select
                v-model="form.blacklistType"
                style="width: 250px;"
                allowClear
                showSearch
                placeholder="请选择黑名单类型">
                <a-select-option
                  :value="1"
                  >{{"收购商"}}
                </a-select-option>
                <a-select-option
                  :value="2"
                  >{{"车牌号码"}}
                </a-select-option>
                </a-select>
            </a-form-model-item>
        </a-col>
        <a-col :span="8">
            <a-form-model-item label="收购商" ref="sgsName" class="form-col" prop="sgsName">
            <a-select
              v-model="form.sgsName"
              placeholder="请输入收购商"
              style="width: 250px;"
              allowClear
              showSearch
            >
            <a-select-option v-for="option in sgs"
              :key="option.label"
              :value="option.value">
              {{option.label}}
            </a-select-option>
            </a-select>
            </a-form-model-item>
        </a-col>
        <a-col :span="8">
            <a-form-model-item label="联系电话" ref="telephone" class="form-col" prop="telephone">
            <a-input-number
              v-model="form.telephone"
              placeholder="请输入联系电话"
              style="width: 250px;"
            />
            </a-form-model-item>
        </a-col>
      </a-row>
      <a-row class="info">
       <a-col :span="8">
            <a-form-model-item label="车牌号码" ref="carNumber" class="form-col" prop="carNumber">
            <a-input
              v-model="form.carNumber"
              placeholder="请输入名称"
              style="width: 250px;"
            />
            </a-form-model-item>
        </a-col>
              <a-col :span="8">
                <a-form-model-item label="启用状态" ref="enablestate" class="form-col" prop="enablestate">
                <a-select
                v-model="form.enablestate"
                style="width: 250px;"
                placeholder="请选择状态">
                <a-select-option
                  :value="2"
                  >{{"启用"}}
                </a-select-option>
                <a-select-option
                  :value="3"
                  >{{"禁用"}}
                </a-select-option>
                </a-select>
                </a-form-model-item>
          </a-col>
          <a-col :span="8">
                <a-form-model-item label="备注" ref="memo" class="form-col" prop="memo">
                <a-textarea
                    v-model="form.memo"
                    placeholder="请填写备注"
                    :auto-size="{ minRows: 3, maxRows: 5 }"
                />
                </a-form-model-item>
          </a-col>
      </a-row>
      <a-form-model-item>
      <div class="footer-btns">
        <a-button type="primary" @click="goBack">返回</a-button>
        <a-button type="primary" @click="handleSubmit">提交</a-button>
      </div>
      </a-form-model-item>
      </a-form-model>
    </div>
   <a-modal
      title="选择项目"
      :visible="formVisible"
      @cancel="hideFormVisible"
      :footer="null"
      width="70%">
      <div>
            <div>
              <div>
                <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">项目：</div>
                <a-input-search placeholder="请输入项目名称 " style="width: 200px" v-model="searchProject.name" @search="searchWl"/>
              </div>
              <DataTable rowKey="phidProject"  :showConfig="false" :tableData="Data" :tableColumn="tableColumn" :pageConfig="pageConfig"></DataTable>
            </div>
        </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Ground extends Vue {
  $refs!: {form: HTMLFormElement}
  orgid: any = ''
  projectid: any = ''
  form: any = {
    orgName: undefined,
    sgsName: undefined,
    telephone: undefined,
    areaName: undefined,
    carNumber: undefined,
    memo: undefined,
    projectName: undefined,
    blacklistType: undefined,
    enablestate: 2
  }
  rules: any = {
    projectName: [{ required: true, message: '请选择项目', trigger: 'blur'}],
    carNumber: [{ required: true, message: '请输入车牌号码', trigger: 'blur'}],
    areaName: [{ required: true, message: '请选择区域', trigger: 'change'}],
    sgsName: [{ required: true, message: '请选择收购商', trigger: 'change'}],
    blacklistType: [{ required: true, message: '请选择黑名单类型', trigger: 'change'}],
    telephone: [{ required: true, message: '请输入电话号码', trigger: 'blur'}, {message: '请输入正确的电话号码', trigger: 'blur', pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/}]
  }
  area: any[] = []
  sgs: any[] = []
  // 弹窗搜索框值
  searchProject: any = {
    name: ''
  }
  formVisible: boolean = false;

  // 关闭弹窗
  hideFormVisible () {
    this.formVisible = false;
    this.form.projectName = ''
    this.form.orgName = ''
    this.projectid = ''
    this.orgid = ''
  }
  get blacklistId () {
    return this.$route.query.phid
  }
  // 返回键
  goBack () {
    this.$router.back()
  }
  handleSubmit () {
    // alert(JSON.stringify())
    this.$refs['form'].validate((valid: any) => {
   if (valid) {
    this.form.phidArea = this.form.areaName.split('-')[0]
    this.form.areaName = this.form.areaName.split('-')[1]
    this.form.phidSgs = this.form.sgsName.split('-')[0]
    this.form.sgsName = this.form.sgsName.split('-')[1]
    this.form.phidOrg = this.orgid
    this.form.phidProject = this.projectid
    let data: any = this.form
    // alert(JSON.stringify(this.form))
    this.$api.blacklistAddBlacklistFetch(data).then((res: any) => {
      this.$message.success('保存成功！')
       this.$router.back()
     })
   } else {
       console.log('error submit!!');
       return false;
       }
   });
  }

  // 打开项目选择弹窗
  showDiag () {
    this.getProjectList()
    // alert("test")
    this.formVisible = true
  }
  // 切换页面
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getProjectList();
  }
  // 分页参数
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  Data: any[] = [];
  tableColumn: any = {
    ncProjectId: {
      label: '项目编码',
      minWidth: 120
    },
    ncProjectName: {
      label: '项目名称',
      minWidth: 120,
      hidden: true
    },
    action: {
      label: '操作',
      width: 120,
      template: [
        {
          tag: 'a',
          text: '确定',
          callback: this.confirmProject
        }
      ]
    }
  };
  init () {
    this.getAreaList()
    this.getDetail()
    this.getSgsInfo()
  }
  searchWl (val: any) {
    // alert(val);
    this.searchProject.name = val
    this.getProjectList()
  }
  // 获取详情
  getDetail () {
    let data = {
      phid: this.blacklistId
    }
    if (data.phid) {
    this.$api.blacklistDetailFetch(data).then((res: any) => {
      res.data.blacklistType = Number(res.data.blacklistType)
      res.data.areaName = res.data.phidArea + '-' + res.data.areaName
      res.data.sgsName = res.data.phidSgs + '-' + res.data.sgsName
      this.form = res.data
      this.orgid = res.data.phidOrg
      this.projectid = res.data.phidProject
    });
    }
  }
  getSgsInfo () {
  let data = {page: '1', size: '999'}
  this.$api.sgsinfoListFetch(data).then((res: any) => {
      res.data.records.map((item: any) => { item.value = item.phid + '-' + item.name; item.label = item.name; })
      this.sgs = res.data.records;
      // console.log("测试"+JSON.stringify(res.data.records))
    });
}
  // 获取项目列表
  getProjectList () {
    let word = this.searchProject.name
    let { current, pageSize } = this.pageConfig
    let data: any = {}
    data.page = current
    data.size = pageSize
    if (word) {
      data.searchValue = word
    }
    this.$api.docInfoProjectListFetch(data).then((res: any) => {
      this.Data = res.data.records
      // console.log(res.data)
      this.pageConfig.total = res.data.total;
    }).catch()
  }
  getAreaList () {
    let data: any = { page: '1', size: '99' }
    // alert("test")
    this.$api.docInfoAreaListFetch(data).then((res: any) => {
        res.data.records.map((item: any) => { item.label = item.name; item.value = item.phid + '-' + item.name })
        // console.log(res.data.records)
        this.area = res.data.records
    }).catch()
  }
  // 确定项目
  confirmProject (val: any, cb: any) {
    this.projectid = val.ncProjectId
    this.orgid = val.pkOrg
    this.form.projectName = val.ncProjectName
    this.form.orgName = val.orgName
    this.formVisible = false
  }
}
</script>

<style lang="scss" scoped>
#myPurchase-detail {
    .top-box{
      margin-bottom: 15px;
        .box-title{
            font-size: 16px;
            font-weight: 700;
            padding-left: 5px;
            color: #000;
            height: 15px;
            line-height: 15px;
            border-left: 3px solid rgb(62, 149, 231);
        }
    }
    .info{
        padding: 10px 0;
        .address{
          display: flex;
        }
        .info-left{
            width: 65px;
            margin-right: 10px;
        }
    }
    .container-title{
      font-size: 16px;
      font-weight: 700;
      padding-left: 5px;
      color: #000;
      height: 15px;
      line-height: 15px;
      border-left: 3px solid rgb(62, 149, 231);
    }
    .title-info{
      margin: 20px 0;
      font-size: 16px;
      .info-left{
        font-weight: 700;
      }
      .info-right{
        margin-right: 80px;
      }
    }
    .header-item{
      text-align: center;
    }
    .footer-btns {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50px 0;
      .ant-btn {
        margin-right: 20px;
      }
    }
}
/deep/ .ant-select-selection-selected-value, .ant-input[disabled]{
  color: rgba(0, 0, 0, 0.8);
}
/deep/ .ant-input-number-input{
   color: rgba(0, 0, 0, 0.8) ;
 }
</style>
